<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取视频缩略图</title>
    </head>
    
    <body>
        <!-- 在页面引入视频 -->
        <video id="video" width="20%" height="200px" controls autoplay>
            <source src="http://img.private.nsfxxkj.com/order/2020/09/12/15998772824035.mp4" type="video/mp4">
        </video>
        
        <!-- 图片缩略图显示的位置 -->
        <div id="output" style="display: inline-block;">
            
        </div>
        
        <!-- 在线引入jquery地址 -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        
        <script type="text/javascript">
            var video = $("#video")[0],
                output = $("#output")[0]; //获取DOM对象
            var scale = 0.1; //图片的倍数
    
            var captureImage = function() { //截取图片的方法
                var canvas = document.createElement("canvas"); //创建一个canvas
                canvas.width = video.videoWidth * scale; //canvas的宽
                canvas.height = video.videoHeight * scale; //canvas的高
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var img = document.createElement("img"); //在页面中创建一个img标签
                img.src = canvas.toDataURL("image/png"); //图片的base64编码
                output.append(img); //将图片显示在id="output"的div中
            };
            var initialize = function() { //初始化方法
                video.addEventListener('loadeddata', captureImage); //为元素添加事件
                //loadeddata在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发
            };
            
            $(function() {
                initialize(); //执行方法
            });
        </script>
    </body>
</html>